<template>
    <div class="home">
        <p>当前求和为：{{ sum }}</p>
        <button @click="add">点我sum+1</button> 
        <hr>
        <img v-for="dog in dogList" :src="dog" alt="" />
        <p><button @click="getDog">来狗</button></p>
        
    </div>
</template>


<script setup lang="ts" name="Page28">
import useSum from '../hooks/useSum';
import useDog from '../hooks/useDog';
const {sum,add}=useSum();
const {dogList,getDog} =useDog();
/*
import { ref, reactive } from 'vue';
import axios from 'axios'
import { error } from 'console';
let sum = ref(0);
function add() {
    sum.value += 1
}
let dogList = reactive([

])
function getDog() {
    axios.get('https://dog.ceo/api/breed/pembroke/images/random').then((res)=>{
        // console.log(res.data)
        dogList.push(res?.data?.message)
    })     
     axios.get('https://dog.ceo/api/breed/pembroke/images/random').then(
         Response=>{
             console.log("成功了",Response.data.message)
             dogList.push(Response?.data?.message)
         },
         error=>{
             console.log('失败了',error)
         }
     )     
}
const getDog2 = async () => {
    try {
        const res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
        dogList.push(res?.data?.message);
    } catch (error) {
        console.log(error)
    }
}
*/

</script>

<style scoped>
img {
    height: 100px;
}
</style>